<template>
  <div class="collect-container">
    <div class="main-container" v-if="List.length">
      <div class="main-item" v-for="(item, index) in List" :key="index" @click="detailsClick(item)">
        <div class="left-container">
          <img :src="imgUrl + item.indexpic" alt />
        </div>
        <div class="right-container">
          <div class="name">{{ item.title }}</div>
          <div class="footer">
            <div class="price">${{item.param1}}</div>
            <div class="btn" @click.stop="addCart(item)">加入购物车</div>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无收藏" v-else/>
  
    <!-- 商品规格 -->
    <van-sku
      ref="sku"
      v-model="cartShow"
      :sku="sku"
      :show-add-cart-btn="false"
      buy-text="加入购物车"
      :goods="goodDetails"
      :goods-id="goodDetails.id"
      :hide-stock="goodDetails.hide_stock"
      @buy-clicked="onAddCard"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [],
      cartShow: false,
      goodDetails: {
        picture: null
      },
      sku: {
        // // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: 0, // 默认价格（单位元）
        stock_num: 0, // 商品总库存
        collection_id: null, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: true, // 是否无规格商品
        hide_stock: true // 是否隐藏剩余库存
      }
    };
  },
  computed: {
    imgUrl () {
      return this.$imgUrl
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      const res = await this.$fetchGet('/home/member/fav')
      this.List = res.data.list
    },
    addCart (item) {
      this.goodDetails.picture = this.imgUrl + item.indexpic
      this.sku.price = item.param1
      this.sku.collection_id = item.tid
      this.sku.stock_num = item.stock || 99999
      this.cartShow = true
    },
    async onAddCard (e) {
      const result = await this.$fetchGet('/home/cart/add', {
        productid: e.selectedSkuComb.id,
        num: e.selectedNum
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      this.cartShow = false
      this.$store.commit('changeCartList')
      this.$toast('加入购物车成功')
    },
    detailsClick (item) {
      // protype   0普通商品，1拼团，2积分，3抢购
      console.log(item)
      let obj = {
        0: "new", // 搜索
        1: "figview", // 国际拼团
        3: "actview" // 限时抢购
      };
      this.$router.push({
        path: '/shopping/details',
        query: {
          type: obj[item.protype],
          id: item.tid
        }
      })
    }
  }
};
</script>

<style lang="scss">
.collect-container {
  .main-container {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: #ffffff;
    .main-item {
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8d8d8;
      .left-container {
        img {
          width: 200px;
          height: 200px;
        }
      }
      .right-container {
        flex: 1;
        margin-left: 50px;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 30px;
          font-weight: bold;
          flex: 1;
        }
        .footer {
          display: flex;
          .price {
            font-size: 27px;
            font-weight: bold;
            color: #ff3b3b;
            flex: 1;
          }
          .btn {
            width: 180px;
            height: 60px;
            color: #fff;
            font-weight: bold;
            border-radius: 60px;
            text-align: center;
            line-height: 60px;
            background: linear-gradient(to right, #fc8f04, #f71c19);
          }
        }
      }
    }
  }
}
</style>